<template>
    <div class="child">
        <h1>自定义的input组件</h1>
        <!-- 这里是父组件传入的数据流向input组件 -->
        <!-- <input type="text" :value="yonghuming"/><br> -->
        <!-- <input type="text" :value="mima"/> -->

        <!-- 这里是input组件输入的数据流回原来的username和password -->
        <!-- <input type="text" @input="emit('update:yonghuming',(<HTMLInputElement>$event.target).value)"/><br> -->
        <!-- <input type="text" @input="emit('update:mima',(<HTMLInputElement>$event.target).value)"/> -->

        <!-- 这里是v-model的全部封装，父组件可以使用v-model双向绑定了 -->
        <input type="text" :value="yonghuming" @input="emit('update:yonghuming',(<HTMLInputElement>$event.target).value)"/><br>
        <input type="text" :value="mima" @input="emit('update:mima',(<HTMLInputElement>$event.target).value)"/>
    </div>
    

</template>

<script lang="ts" setup>
    // 数据部分，这里是组件的props接收
    defineProps(['yonghuming', 'mima'])
    // 事件部分，类似自定义事件的接收，但是事件名字必须遵循update:xxx的格式
    const emit = defineEmits(['update:yonghuming','update:mima'])
</script>

<style scoped>
    input{
        width: 200px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 0 10px;
        margin: 10px 0;
    }
</style>